import { useAppSelector } from '@/store'
import { fetchBannerDataAction } from '@/store/modules/recommend'
import React, { memo, useEffect, useRef } from 'react'
import type { FC, ReactNode } from 'react'
import { shallowEqual, useDispatch } from 'react-redux'
import { BannerWrapper, BannerLeft, BannerRight, BannerControl } from './style'
import { Carousel } from 'antd'
import { CarouselRef } from 'antd/es/carousel'

interface IProps {
  children?: ReactNode
}

const Recommend: FC<IProps> = () => {
  const bannerRef = useRef<CarouselRef>(null)
  const dispatch = useDispatch()
  const { banners } = useAppSelector(
    (state) => ({
      banners: state.recommend.banners
    }),
    shallowEqual
  )
  useEffect(() => {
    dispatch(fetchBannerDataAction())
  }, [])
  function handlePrevClick() {
    bannerRef.current?.prev()
  }
  function handleNextClick() {
    if (bannerRef.current) {
      bannerRef.current?.next()
    }
  }

  return (
    <BannerWrapper>
      <div className="banner wrap-v2">
        <BannerLeft>
          <Carousel effect="fade" autoplay ref={bannerRef}>
            {banners.map((item) => {
              return (
                <div className="banner-item" key={item.imageUrl}>
                  <img
                    className="image"
                    src={item.imageUrl}
                    alt={item.typeTitle}
                  />
                </div>
              )
            })}
          </Carousel>
        </BannerLeft>
        <BannerRight></BannerRight>
        <BannerControl>
          <button className="btn left" onClick={handlePrevClick}></button>
          <button className="btn right" onClick={handleNextClick}></button>
        </BannerControl>
      </div>
    </BannerWrapper>
  )
}

export default memo(Recommend)
